<!-- 12.8 4500家实体店列表页面（导购、城市） -->
<template>
	<app-layout>
		<!-- 搜索 -->
		<view class="page-width">
			<app-search-for :value="value" placeholder="搜实体店" isemit @tosearch="tosearch"></app-search-for>
		</view>
		<!-- 轮播图 -->
		<view class="" style="margin: 0 12rpx;" v-if="sort_id == 1 && banners.length > 0">
			<app-swiper width="100" room effect3d effect3dNextMargin="208" :list="banners" mode="rect" name="icon_url"
				:itemStyle="itemStyle" :height="328" :autoplay="false" ref="givedz" imgMode="scaleToFill">
			</app-swiper>
		</view>
		<view class="" style="margin: 0 12rpx;" v-if="sort_id == 2 && banners.length > 0">
			<view class="imgsox">
				<app-jump-button form :url="banners[0].url">
					<image class="imagexs" :src="banners[0].icon_url" mode="widthFix"></image>
				</app-jump-button>
			</view>
		</view>
		<view class="dir-left-nowrap cross-top onetop" v-if="snavs1 != '' && snavs1.subnav.length > 0">
			<view class="left-ti dir-left-nowrap cross-center main-center">
				<!-- <view class="allti oneti u-line-2">{{snavs1.name}}</view>
				<image class="wholeimg" :src="snavs1.icon_url" mode="aspectFit"></image> -->
				<image class="img" :src="snavs1.icon_url" mode="aspectFit"></image>
			</view>
			<view class="rightie">
				<!-- style="width: 584rpx;"  navHeight="148" 164-28+28:isver   allwidth="480"+130-62  allwidth="548"改为652  -->
				<app-navigation-icon :isver="true" :istext="false" :isShow="false" allwidth="652" nextMargin="120rpx"
					:autoplay="false" navHeight="164" navMargin="0 auto" :navs="snavs1.subnav" background="#F7F7F7"
					itembackground="#FFFFFF" textwidth="96rpx" :scroll="true" :columns="2" :imgStyle="imgstyle2"
					:rows="1" @btclick="tozhibo">
				</app-navigation-icon>
			</view>
		</view>
		<view class="clitop" v-if="snavs2 != '' && snavs2.subnav.length > 0">
			<view class="cate-title cross-center">
				<text>{{snavs2.name}}</text>
				<!-- <image class="cate-image" :src="snavs2.icon_url" mode="aspectFit"></image> -->
			</view>
			<view class="righti" style="width: 726rpx;">
				<!-- navHeight="270" 332-28+24 :istext="false" -->
				<app-navigation-icon :isShow="false" allwidth="726" nextMargin="90rpx" :autoplay="false" navHeight="328"
					navMargin="0 auto" :navs="snavs2.subnav" background="#FFFFFF" itembackground="#FFFFFF"
					:scroll="true" :columns="3" :imgStyle="imgstyle3" :rows="1" @btclick="tozhibo">
				</app-navigation-icon>
			</view>
			<view class="arrowtip">
				<image src="/static/image/arrow.png" mode="" class="left"></image>
				<text>要左右滑动哦</text>
				<image src="/static/image/arrow.png" mode="" class="right"></image>
			</view>
			<view class="climore" @click="jump(snavs2.url)">
				查看更多>>>
			</view>
		</view>
		<view class="clitop" v-if="snavs3 != '' && snavs3.subnav.length > 0">
			<view class="cate-title cross-center">
				<text>{{snavs3.name}}</text>
				<!-- <image class="cate-image" :src="snavs3.icon_url" mode="aspectFit"></image> -->
			</view>
			<view class="righti" style="width: 726rpx;">
				<!-- 332-28 -->
				<app-navigation-icon :isShow="false" allwidth="726" nextMargin="90rpx" :autoplay="false" navHeight="328"
					navMargin="0 auto" :navs="snavs3.subnav" background="#FFFFFF" itembackground="#FFFFFF"
					:scroll="true" :columns="3" :imgStyle="imgstyle3" :rows="1" @btclick="tozhibo">
				</app-navigation-icon>
			</view>
			<view class="arrowtip">
				<image src="/static/image/arrow.png" mode="" class="left"></image>
				<text>要左右滑动哦</text>
				<image src="/static/image/arrow.png" mode="" class="right"></image>
			</view>
			<view class="climore" @click="jump(snavs3.url)">
				查看更多>>>
			</view>
		</view>
		<view class="clitop" v-if="snavs4 != '' && snavs4.subnav.length > 0">
			<view class="cate-title cross-center">
				<text>{{snavs4.name}}</text>
				<!-- <image class="cate-image" :src="snavs4.icon_url" mode="aspectFit"></image> -->
			</view>
			<!-- 332-28 -->
			<view class="righti" style="width: 726rpx;">
				<app-navigation-icon :isShow="false" allwidth="726" nextMargin="90rpx" :autoplay="false" navHeight="328"
					navMargin="0 auto" :navs="snavs4.subnav" background="#FFFFFF" itembackground="#FFFFFF"
					:scroll="true" :columns="3" :imgStyle="imgstyle3" :rows="1" @btclick="tozhibo">
				</app-navigation-icon>
			</view>
			<view class="arrowtip">
				<image src="/static/image/arrow.png" mode="" class="left"></image>
				<text>要左右滑动哦</text>
				<image src="/static/image/arrow.png" mode="" class="right"></image>
			</view>
			<view class="climore" @click="jump(snavs4.url)">
				查看更多>>>
			</view>
		</view>
		<!-- <view class="list-one">
			<view class="list-one-item" @click="routeGo(2)">
				<text class="u-line-2 one-title">实体店</text>
			</view>
		</view> -->
		<!-- <view class="list-one">
			<view class="list-one-item" v-for="(item,index) in entlist" :key="index" @click="routeGo(item.id)">
				<image class="image" :src="item.cover_img" mode=""></image>
				<text class="u-line-2 one-title">{{item.name}}</text>
			</view>
		</view> -->
		<view class="lowest">
			<u-indexware :value="entlist"></u-indexware>
		</view>
		<!-- 返回顶部 -->
		<view class="quick-box dir-top-nowrap" style="bottom: 180rpx" v-if="opacity == 1">
			<image @click="backTop" class="quick-btn" src="../../static/image/icon/back-top.png"></image>
		</view>
	</app-layout>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import appSearchFor from '../../components/page-component/app-search-for/app-search-for.vue'
	import appNavigationIcon from '../../components/page-component/app-navigation-icon/app-navigation-icon.vue'
	import appSwiper from '../../components/page-component/app-swiper/app-swiper.vue'
	import uGospeedware from '../../components/page-component/u-goods-list/u-gospeed-ware.vue';
	import uIndexware from '../../components/page-component/u-goods-list/u-indexware.vue';

	let loadcom = false

	export default {
		data() {
			return {
				// imgstyle2: "width: 100rpx;height: 148rpx;flex:1;margin-right:12rpx",
				// imgstyle3: "width: 180rpx;height: 180rpx",
				imgstyle2: "width: 231rpx;height: 164rpx",
				imgstyle3: "width: 197rpx;height: 294rpx",
				value: {
					background: `#F7F7F7`,
					color: '#FFFFFF',
					placeholder: '搜索',
					radius: 15,
					textColor: '#c0c0c0',
					textPosition: `center`,
					shadow: `0 16rpx 32rpx rgba(0, 0, 0, 0.1);`
				},
				/* 判断是 以什么为导向的实体店列表 
				 * sort_id 
				 *  1 导购头像
				 *  2 城市列表
				 */
				sort_id: 1,

				banners: [],
				navs: [],
				livelist: [],
				list: [],

				page: 1,
				limit: 4,
				page_count: 1,
				total_count: 1,
				// 返回顶部
				top: 400,
				scrollTop: 0,
				opacity: 0,

				imgprefix: this.$siteInfo.imgroot,
				itemStyle: "width:484rpx",

				// 12.13
				entlist: [],
				// 最新与粉丝热捧区域
				snavs1: '',
				snavs2: '',
				snavs3: '',
				snavs4: '',
			}
		},
		onLoad(options) {
			this.sort_id = options.sortid || 1
			if (this.sort_id == 1) {
				this.allReq(235)
				this.navsReq(11)
				this.allEnReq(240)
			} else if (this.sort_id == 2) {
				this.allReq(241)
				this.navsReq(12)
				this.allEnReq(246)
			}
			// this.loadentlist()
			this.page = 1
			this.page_count = 1
			uni.showShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		// 返回顶部
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		computed: {
			// 返回顶部
			showBackTop() {
				// 由于scrollTop为页面的滚动距离，默认为px单位，这里将用于传入的top(rpx)值
				// 转为px用于比较，如果滚动条到顶的距离大于设定的距离，就显示返回顶部的按钮
				return this.scrollTop > uni.upx2px(this.top);
			},
			...mapState({
				userInfo: state => state.user.info
			})
		},
		onShareAppMessage() {
			return this.$shareAppMessage({
				path: '/pages/entity/list',
				params: {

				}
			});
		},
		onShareTimeline() {
			// 分享朋友圈beta
			return this.$shareTimeline({
				path: '/pages/entity/list',
				params: {

				}
			});
		},
		watch: {
			// 返回顶部
			showBackTop(nVal, oVal) {
				// 当组件的显示与隐藏状态发生跳变时，修改组件的层级和不透明度
				// 让组件有显示和消失的动画效果，如果用v-if控制组件状态，将无设置动画效果
				if (nVal) {
					this.opacity = 1;
				} else {
					this.opacity = 0;
				}
			}
		},
		components: {
			appSearchFor,
			appNavigationIcon,
			appSwiper,
			uGospeedware,
			uIndexware
		},
		onReachBottom() {
			if (this.page < this.page_count) {
				this.page++
				if (this.sort_id == 1) {
					this.allEnReq(240)
				} else if (this.sort_id == 2) {
					this.allEnReq(246)
				}
			}
		},
		methods: {
			tosearch() {
				uni.navigateTo({
					url: '/pages/gospeed/search?zhilive=0'
				})
			},
			navsReq(id) {
				this.$request({
					url: this.$api.navs.index,
					data: {
						id: id
					}
				}).then((res) => {
					if (res.code === 0) {
						if (id == 11) {
							this.snavs1 = res.data.list[236]
							this.snavs2 = res.data.list[237]
							this.snavs3 = res.data.list[238]
							this.snavs4 = res.data.list[239]
						} else if (id == 12) {
							this.snavs1 = res.data.list[242]
							this.snavs2 = res.data.list[243]
							this.snavs3 = res.data.list[244]
							this.snavs4 = res.data.list[245]
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(() => {

				})
			},
			allEnReq(pid) {
				this.$request({
					url: this.$api.navs.list,
					data: {
						pid: pid,
						status: 1,
						limit: 10,
						page: this.page
					}
				}).then((res) => {
					if (res.code == 0) {
						this.entlist = this.entlist.concat(res.data.list)
						this.page_count = res.data.pagination.page_count
					}
				}).catch(() => {

				})
			},
			// 获取实体店列表
			loadentlist() {
				// console.log(8888888);
				this.$request({
					url: this.$api.entity.list,
					data: {
						page: this.page,
						limit: 10,
						formdata: {
							// district_id: 0,
							// user_id: 0,
							catid: 1
						}
					}
				}).then((res) => {
					this.entlist = this.entlist.concat(res.data.list)
					this.entlist.forEach(item => {
						if (this.sort_id == 1) {
							item.cover_img = item.malloption.option1.cateinfo[0].icon_url
						} else if (this.sort_id == 2) {
							item.cover_img = item.malloption.option1.cateinfo[1].icon_url
						}
					})
					this.page_count = res.data.pagination.page_count
				}).catch(err => {
					// console.log(err);
				})
			},
			// 跳转实体店详情
			routeGo(mall_id) {
				uni.navigateTo({
					url: '/pages/entity/index?mall_id=' + mall_id
				});
			},
			// 返回顶部
			backTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			jump(item, id) {
				if (item == '/' || item == 'javascript:;' || item == '') {
					return
				}
				if (item.toString().indexOf('/pages/gospeed/index') != -1) {
					uni.reLaunch({
						url: item
					})
					return
				}
				if (item == '/pages/bepartner/index') {
					if (this.userInfo.vdian_id != null) {
						this.appStatus(this.userInfo.vdian_id)
						return;
					}
				}
				if (id) {
					if (url.indexOf('?') != -1) {
						item = item + '&id=' + id
					} else {
						item = item + '?id=' + id
					}
				}
				uni.navigateTo({
					url: item
				})
			},
			tolist(item) {
				let url = '/pages/goods/vi?id=' + item.id
				if (this.available) {
					url = '/pages/goods/vi?id=' + item.id + '&available=true'
					if (this.goldsnum) {
						url = '/pages/goods/vi?id=' + item.id + '&available=true&goldsnum=' + this.goldsnum
					}
				}
				if (item.status != 1) {
					uni.navigateTo({
						url: url
					})
				}
			},
			toentity(item) {
				// console.log(item, '---------');
				uni.navigateTo({
					url: '/pages/entity/index'
				})
			},
			topage(item) {
				let url = '/pages/goods/vi?id=' + item.id
				if (this.available) {
					url = '/pages/goods/vi?id=' + item.id + '&available=true'
					if (this.goldsnum) {
						url = '/pages/goods/vi?id=' + item.id + '&available=true&goldsnum=' + this.goldsnum
					}
				}
				if (item.url == '/pages/bepartner/index') {
					if (this.userInfo.vdian_id != null) {
						this.appStatus(this.userInfo.vdian_id)
						return;
					}
				}
				if (item.content != undefined) {
					if (item.status != 1) {
						uni.navigateTo({
							url: url
						})
					}
				} else {
					uni.navigateTo({
						url: item.url
					})
				}
			},
			appStatus(id) {
				let self = this
				let status = 0
				self.$request({
					url: self.$api.apply.store,
					data: {
						id: id
					},
					method: 'get',
				}).then(res => {
					if (res.data.review_status == 0) {
						self.status = 0
						uni.navigateTo({
							url: '/pages/bepartner/index'
						})
						return;
					} else if (res.data.review_status == 1) {
						self.status = 1
						uni.redirectTo({
							url: '/pages/store/mine/mine'
						});
						return;
					} else if (res.data.review_status == 2) {
						self.status = 2
						uni.navigateTo({
							url: '/pages/bepartner/index'
						})
						return;
					}
				}).catch(e => {

				})
			},
			listJump(id, list, stime, etime) {
				/* let ctime = this.$utils.datetime()
				let sqtime = stime.substr(0, 10)
				let shtime = stime.substr(11).replaceAll(':', '')
				let eqtime = etime.substr(0, 10)
				let ehtime = etime.substr(11).replaceAll(':', '')
				this.shatime = stime.substr(11, 5)
				this.ehatime = etime.substr(11, 5)
				let cqtime = ctime.substr(0, 10)
				let chtime = ctime.substr(11).replaceAll(':', '') */
				// 当前时间
				let catime = new Date()
				// 开始时间
				let satime = new Date(stime.replaceAll('-', '/'))
				// 结束时间
				let eatime = new Date(etime.replaceAll('-', '/'))
				/* if (list != '') {
					if (satime > catime) {
						this.sup_status = 1
					} else if (satime <= catime && catime < eatime) {
						this.sup_status = 2
					} else if (catime >= eatime) {
						this.sup_status = 3
					}
					// if (sqtime != cqtime) {
					// 	this.sup_status = 0
					// } else if (sqtime == cqtime) {
					// 	if (chtime < shtime) {
					// 		this.sup_status = 1
					// 	} else if (chtime > shtime) {
					// 		if (chtime < ehtime) {
					// 			this.sup_status = 2
					// 		} else {
					// 			this.sup_status = 3
					// 		}
					// 	}
					// }
				} else {
					this.sup_status = 0
				} */
				if (satime > catime) {
					this.sup_status = 1
				} else if (satime <= catime && catime < eatime) {
					/* if (list.length != 0) {
						this.sup_status = 2
					} else {
						this.sup_status = 3
					} */
					let salist = []
					salist = list.filter((itm, index) => {
						return itm.goods_stock != 0
					})
					if (salist.length == 0) {
						this.sup_status = 3
					} else {
						this.sup_status = 2
					}
				} else if (catime >= eatime) {
					this.sup_status = 3
				}
				return this.sup_status
				// return this.sup_status
			},
			// 自身的数据
			selfReq(pid) {
				this.$request({
					url: this.$api.navs.catedetail,
					data: {
						keyword: pid,
						status: 1,
						limit: 200
					}
				}).then((res) => {
					if (res.code == 0) {
						if (pid == 2) {
							this.navs = res.data.list
							this.allReq(2) // banner
						}
						// if (pid == 106 && this.zhilve == 0) {
						// 	this.banners = res.data.list
						// } else if (pid == 79 && this.zhilve == 1) {
						// 	this.banners = res.data.list
						// } else if (pid == 2) {
						// 	this.navs = res.data.list
						// }
					}
				}).catch(() => {

				})
			},
			allReq(pid) {
				this.$request({
					url: this.$api.navs.list,
					data: {
						pid: pid,
						status: 1,
						limit: 200
					}
				}).then((res) => {
					if (res.code == 0) {
						if (pid == 235) {
							this.banners = res.data.list
							// this.loadentlist()
						} else if (pid == 241) {
							this.banners = res.data.list
							// this.loadentlist()
						}
					}
				}).catch(() => {

				})
			},
			async request(status) {
				loadcom = false
				const res = await this.$request({
					url: this.$api.navs.mix,
					data: {
						pids: '22,47',
						page: this.page,
						limit: this.limit
					}
				});
				if (res.code === 0) {
					loadcom = true
					this.page_count = res.data.pagination.page_count;
					this.total_count = res.data.pagination.total_count;
					let listvideo = []
					let status = ''
					listvideo = listvideo.concat(res.data.list)
					listvideo = listvideo.filter(response => {
						let nes = response[0]
						status = this.listJump(nes.id, nes.goodslist, nes.start_at, nes.end_at)
						nes.start_at = nes.start_at.substr(11, 5)
						nes.end_at = nes.end_at.substr(11, 5)
						this.$set(nes, 'status', status);
						this.$set(nes, 'start_at', nes.start_at);
						this.$set(nes, 'end_at', nes.end_at);
						return nes
					})
					/* this.videolist = listvideo
					console.log(this.videolist); */
					// if(this.page == 1){
					// 	this.blendList = listvideo.flat()
					// }else{
					// 	this.blendList = this.blendList.concat(listvideo.flat())
					// }
					this.blendList = this.blendList.concat(listvideo.flat())
					this.blendList = this.blendList.filter(function(el) {
						return el.length !== 0;
					});
					// this.$storage.setStorageSync('gospeedLoop', this.blendList)
					uni.stopPullDownRefresh()
				} else {
					uni.stopPullDownRefresh()
					uni.showModal({
						title: '提示',
						content: res.msg,
					})
				}
			},
			async appPort() {
				// 9.9修
				loadcom = false
				const res = await this.$request({
					url: this.$api.navs.mersq,
					data: {
						page: this.page,
						status: 1,
						limit: this.limit
					}
				});
				if (res.code === 0) {
					loadcom = true
					let listvideo = []
					let status = ''

					listvideo = res.data.list
					listvideo = listvideo.filter(response => {
						let nes = response
						status = this.listJump(nes.id, nes.goodslist, nes.start_at, nes.end_at)
						nes.start_at = nes.start_at.substr(11, 5)
						nes.end_at = nes.end_at.substr(11, 5)
						this.$set(nes, 'status', status);
						this.$set(nes, 'start_at', nes.start_at);
						this.$set(nes, 'end_at', nes.end_at);
						return nes
					})
					// console.log(listvideo);
					this.videolist = this.videolist.concat(listvideo)

					if (this.zhilve == 1) {
						this.list = this.videolist
						this.page_count = res.data.pagination.page_count;
						this.total_count = res.data.pagination.total_count;
					}
					uni.stopPullDownRefresh()
				} else {
					uni.stopPullDownRefresh()
					uni.showModal({
						title: '提示',
						content: res.msg,
					})
				}
				/* this.$request({
					url: this.$api.navs.mersq,
					data: {
						page: this.page,
						status: 1
					}
				}).then((res) => {
					uni.stopPullDownRefresh()
					if (res.code == 0) {
						loadcom = true
						let listvideo = []
						let status = ''
						this.page_count = res.data.pagination.page_count;
						this.total_count = res.data.pagination.total_count;
						listvideo = res.data.list
						listvideo = listvideo.filter(response => {
							let nes = response
							status = this.listJump(nes.id, nes.goodslist, nes.start_at, nes.end_at)
							nes.start_at = nes.start_at.substr(11, 5)
							nes.end_at = nes.end_at.substr(11, 5)
							this.$set(nes, 'status', status);
							this.$set(nes, 'start_at', nes.start_at);
							this.$set(nes, 'end_at', nes.end_at);
							return nes
						})
						// console.log(listvideo);
						this.videolist = this.videolist.concat(listvideo)
					}
				}).catch(() => {
					uni.stopPullDownRefresh()
				}) */
			},
		}
	}
</script>

<style scoped lang="scss">
	.index-nav {
		width: #{750rpx};
		height: #{80rpx};
		// line-height: 80rpx;
		margin: 24rpx 0;
	}

	.imgsox {
		width: 100%;

		.imagexs {
			width: 100%;
		}
	}

	.app-index-nav {
		height: #{80rpx};
		width: #{750rpx};

		.app-item {
			display: inline-block;
			// font-size: #{40rpx};
			font-size: 36rpx;
			font-weight: bold;
			text-align: center;
			color: #353535;
			padding: 0 #{20rpx};
			line-height: #{56rpx};
			position: relative;

			&.active {
				// border: 1rpx solid #353535;
				// text-shadow: 0 0 18rpx #a96536;
				text-shadow: 0 -12rpx 8rpx #a96536,
					/*上*/
					8rpx -8rpx 8rpx #a96536,
					/*右上*/
					12rpx 0 8rpx #a96536,
					/*右*/
					8rpx 8rpx 8rpx #a96536,
					/*右下*/
					0 12rpx 8rpx #a96536,
					/*下*/
					-8rpx 8rpx 8rpx #a96536,
					/*左下*/
					-12rpx 0 8rpx #a96536,
					/*左*/
					-8rpx -8rpx 8rpx #a96536;
				color: #ffffff;
			}

			.app-item-imga {
				height: 56rpx;
			}

			.app-item-img {
				height: 56rpx;
				border: none;
				width: 56rpx;
			}
		}
	}

	.cate-title {
		// text-align: center;
		font-size: 32rpx;
		// margin-top: 20rpx;
		line-height: 80rpx;
		position: relative;
		font-weight: bold;
	}

	.cate-image {
		width: 40rpx;
		height: 40rpx;
	}

	.cate-title .line {
		position: absolute;
		height: 2rpx;
		width: 300rpx;
		background: #f4f4f4;
		top: 39rpx;
		left: 50%;
		margin-left: -150rpx;
	}

	.cate-title text {
		padding: 0 10px;
		position: relative;
	}

	.list-one {
		width: 720rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;

		.list-one-item {
			width: 350rpx;
			height: 460rpx;
			font-size: 28rpx;
			margin: 24rpx 0;
			background: #fff;

			.image {
				width: 350rpx;
				height: 350rpx;
			}

			.one-title {
				padding: 0 24rpx;
			}
		}
	}

	.list-two {
		width: 100%;

		.list-two-item {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin: 0 auto;
			width: 720rpx;
			height: 240rpx;
			font-size: 28rpx;

			&+.list-two-item {
				margin-top: 24rpx;
			}

			.image {
				width: 240rpx;
				height: 240rpx;
			}

			.list-two-title {
				flex: 1;
				margin-left: 36rpx;
				text-align: justify;
			}
		}
	}

	.nowmoew {
		text-align: center;
		line-height: 100rpx;
		font-size: 28rpx;
		font-weight: 700;
	}

	.onetop {
		width: 726rpx;
		margin: 28rpx auto;
	}

	.clitop {
		width: 726rpx;
		margin: 28rpx auto;
		background-color: #FFFFFF;
	}

	.rightie {
		// width: 584rpx;
		width: 652rpx;
	}

	// 董事长推荐
	.left-ti {
		width: 62rpx;
		// width: 130rpx;
		height: 164rpx;
		position: relative;
		background-color: #fff;
		margin: 0 12rpx 0 0;

		.img {
			width: 62rpx;
			height: 164rpx;
		}

		.allti {
			font-size: 30rpx;
			font-weight: bold;
			text-align: center;
		}

		.oneti {
			color: #000000;
			// line-height: 148rpx;
		}

		.twoti {
			color: #2a29da;
		}

		.thrti {
			text-align: center;
			color: #a96536;
		}

		.wholeimg {
			width: 60rpx;
			height: 42rpx;
			position: absolute;
			top: -21rpx;
			left: 50%;
			transform: translateX(-50%);
		}

		.material {
			margin-top: 12rpx;
			font-size: 25rpx;
			color: #d1d1d1;
		}
	}

	.climore {
		width: 726rpx;
		background-color: #FFFFFF;
		// padding: 32rpx 12rpx 20rpx;
		padding: 0 12rpx 20rpx;
		font-size: 26rpx;
		font-weight: bold;
		text-align: right;
		border-radius: 0 0 24rpx 24rpx;
	}

	.arrowtip {
		height: 48rpx;
		width: 100%;
		padding-top: 12rpx;
		position: relative;
		font-size: 30rpx;
		text-align: center;
		color: #ff0000;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: bold;

		image {
			&.left {
				transform: rotate(180deg);
				margin-right: 16rpx;
			}

			&.right {
				margin-left: 16rpx;
			}

			width: 88rpx;
			height: 16rpx;
		}
	}

	.morelive {
		flex: 1;
		padding: 24rpx 12rpx;

		// background-color: #FFF;
		.morelive-item {
			padding: 24rpx 12rpx;
			margin: 24rpx 0;
			background-color: #ffffff;
			border-radius: 16rpx;
		}

		.live-commodity {
			font-size: 36rpx;
			font-weight: 600;
			width: 120rpx;
			margin-left: 24rpx;

			.live-img {
				width: 120rpx;
				height: 120rpx;
			}

			.price {
				text-align: center;
			}
		}

		.more-discount {
			font-size: 28rpx;
			font-weight: 600;
			margin-top: 120rpx;
		}
	}

	/* 循环 */
	.live-image {
		position: relative;

		.live-img {
			width: 351rpx;
		}

		.tag-box {
			position: absolute;
			top: 0;
			left: 0;
			display: flex;
		}

		.tag-box-1 {
			.text {
				background: #22ac38;
			}

			.text-time {
				padding: 12#{rpx} 20#{rpx};
				font-size: 24#{rpx};
				color: #fff;
				background: rgba(0, 0, 0, 0.5);
				margin-left: -20rpx;
				border-bottom-right-radius: 30#{rpx};
				border-top-right-radius: 30#{rpx};
				padding-left: 30#{rpx};
			}
		}

		.tag-box-2 {
			.text {
				background: #777777;
			}
		}

		.tag-box-3 {
			.text {
				background: #ff4544;
			}

			.live-icon {
				width: 24#{rpx};
				height: 24#{rpx};
				margin-right: 12#{rpx};
			}
		}

		.round {
			width: 15#{rpx};
			height: 15#{rpx};
			background: #fff;
			border-radius: 50%;
			margin-right: 12#{rpx};
		}

		.text {
			padding: 12#{rpx} 20#{rpx};
			font-size: 26#{rpx};
			// border-top-left-radius: 16#{rpx};
			border-top-right-radius: 30#{rpx};
			border-bottom-right-radius: 30#{rpx};
			z-index: 10;
			color: #fff;
			display: flex;
			align-items: center;
		}
	}

	/* 今日推荐 */
	.betoday {
		position: relative;
		width: 686rpx;
		height: 128rpx;
		margin: 64rpx auto 20rpx;
		background: #342B2A;
		border-radius: 80rpx;
		color: #FFFFFF;
	}

	.betbg {
		position: absolute;
		width: 64rpx;
		height: 62rpx;
		top: 34rpx;
	}

	.betbg.left {
		left: 48rpx;
	}

	.betbg.right {
		right: 48rpx;
	}

	.betbg image {
		width: 64rpx;
		height: 62rpx;
	}

	.betfont {
		text-align: center;
		line-height: 128rpx;
		font-weight: bold;
		font-size: 48rpx;
		letter-spacing: 0.235em;
	}

	.betfont::before {
		content: '';
		width: 48rpx;
		height: 2rpx;
		position: absolute;
		/* border: 2px solid #FFFFFF; */
		background: #FFFFFF;
		left: 136rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.betfont::after {
		content: '';
		width: 48rpx;
		height: 2rpx;
		position: absolute;
		/* border: 2px solid #FFFFFF; */
		background: #FFFFFF;
		right: 136rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	// 猜你喜欢
	.guess {
		width: 686rpx;
		margin: 32rpx;
		height: 398rpx;
		background-color: #FFFFFF;
		color: #333333;
		border-radius: 20rpx;
		padding: 32rpx;
		position: relative;

		.guessit {
			font-size: 36rpx;
			position: absolute;
			z-index: 666;
		}

		.image {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
		}
	}

	/* 成为合伙人，APP端口 */
	.bepartner {
		width: 686rpx;
		margin: 32rpx;
		display: flex;
		justify-content: space-between;
	}

	.bepartnerone {
		width: 328rpx;
		height: 222rpx;
		position: relative;
		background: #FFFFFF;
		border-radius: 16rpx;
		overflow: hidden;

		.image {
			width: 328rpx;
			height: 150rpx;

			.img {
				width: 100%;
				height: 100%;
			}
		}

		.title {
			height: 72rpx;
			line-height: 36rpx;
			padding: 10rpx 16rpx;
			color: rgba($color: #000000, $alpha: 0.84);
			font-size: 24rpx;
		}
	}

	// 视频
	.superior {
		width: 686rpx;
		// height: 350rpx;
		margin: 24rpx auto;
		position: relative;

		.image {
			width: 100%;
			// height: 350rpx;
		}

		.play {
			position: absolute;
			/* width: 80rpx;
			height: 80rpx;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%); */
			width: 40rpx;
			height: 40rpx;
			top: 30rpx;
			right: 30rpx;
		}

		.status {
			width: 328rpx;
			height: 48rpx;
			border-radius: 0 40rpx 40rpx 0;
			padding: 0 0 0 156rpx;
			text-align: center;
			background: rgba(0, 0, 0, .4);
			position: absolute;
			left: 0;
			top: 16rpx;
			color: #FFFFFF;
			font-size: 20rpx;
			line-height: 50rpx;

			.notice {
				font-size: 24rpx;
				width: 156rpx;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				text-align: center;
				background: linear-gradient(90deg, #FD6E60 0%, #FE4C4B 100%);
				border-radius: 0 96rpx 96rpx 0;
			}
		}
	}

	// 视频二
	.superiordou {
		width: 686rpx;
		// height: 418rpx;
		margin: 24rpx auto;
		display: flex;
		justify-content: space-between;

		.supertwo {
			width: 328rpx;
			// height: 418rpx;
			position: relative;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			overflow: hidden;

			.play {
				position: absolute;
				/* width: 80rpx;
				height: 80rpx;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%); */
				width: 40rpx;
				height: 40rpx;
				bottom: 126rpx;
				right: 30rpx;
			}

			.image {
				width: 100%;
				// height: 350rpx;
			}

			.title {
				margin: 8rpx 14rpx 24rpx;
				font-size: 24rpx;
				line-height: 36rpx;
				color: rgba(0, 0, 0, 0.84);
			}

			.status {
				width: 100%;
				height: 48rpx;
				padding: 0 0 0 156rpx;
				text-align: center;
				background: rgba(0, 0, 0, .4);
				position: absolute;
				left: 0;
				top: 16rpx;
				color: #FFFFFF;
				font-size: 20rpx;
				line-height: 50rpx;

				.notice {
					font-size: 24rpx;
					width: 156rpx;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					text-align: center;
					background: linear-gradient(90deg, #FD6E60 0%, #FE4C4B 100%);
					border-radius: 0 96rpx 96rpx 0;
				}
			}
		}
	}

	// 视频
	.superiall {}



	// 循环
	.beloop {
		// width: 686rpx;
		margin: 48rpx auto 12rpx;
		position: relative;
		/* display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap; */
	}

	.belooprow {
		position: absolute;
		top: 0;
		left: 0;
		margin-bottom: 32rpx;
		width: 350rpx;
		// height: 454rpx;
		background: #FFFFFF;
		box-shadow: 0px 30px 60px rgba(57, 57, 57, 0.1);
		border-radius: 16rpx;
		overflow: hidden;
	}

	.belooprow .image {
		width: 100%;
		// height: 470rpx;
		position: relative;

		.no-goods {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.3);
			margin: 0 auto;

			.no-title {
				width: 208rpx;
				padding: 0 48rpx;
				height: 56rpx;
				border-radius: 130rpx;
				background-color: rgba($color: #000000, $alpha: 0.4);
				backdrop-filter: blur(9px);
				font-size: 28rpx;
				text-align: center;
				line-height: 56rpx;
				color: #FFFFFF;
				font-weight: bold;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
		}

		.status {
			width: 350rpx;
			height: 48rpx;
			padding: 0 0 0 156rpx;
			text-align: center;
			background: rgba(0, 0, 0, .4);
			position: absolute;
			left: 0;
			top: 16rpx;
			color: #FFFFFF;
			font-size: 20rpx;
			line-height: 50rpx;

			.notice {
				font-size: 24rpx;
				width: 156rpx;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				text-align: center;
				background: linear-gradient(90deg, #FD6E60 0%, #FE4C4B 100%);
				border-radius: 0 192rpx 192rpx 0;
			}
		}
	}

	.belooprow .image .img {
		width: 100%;
		height: 100%;
	}

	.belooprow .title {
		margin: 8rpx 14rpx 24rpx;
		font-size: 12px;
		line-height: 18px;
		color: rgba(0, 0, 0, 0.84);
	}

	// 返回顶部
	.quick-box {
		position: fixed;
		bottom: #{40rpx};
		right: #{48rpx};
		z-index: 100;
		transition: opacity 0.4s;
	}

	.quick-btn {
		width: #{80rpx};
		height: #{80rpx};
		margin-top: #{32rpx};
	}

	.lowest {
		margin: 0 0 24rpx;
	}
</style>
